<template>
<div class="topnav">
    <div class="liebiao">
        <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-31liebiao"></use>
        </svg>
    </div>
    <div class="topnav-list">
        <span>我的</span><span>发现</span><span>云村</span><span>视频</span>
    </div>
    <div class="search">
        <router-link :to="{path:'/search'}">
        <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
        </svg>
        </router-link>
    </div>
</div>
</template>

<script>

export default {
    setup () {
    
        return {}
    }
}
</script>

<style lang="less" scoped>
.topnav{
    display: flex;
    // justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    height: 24px;
    .liebiao{
        margin-left: 20px;
        margin-right: 40px;
        .icon {
       width: 20px;
       height: 20px;
      //  margin : auto auto;
      line-height: 24px;
    }
    }
    .topnav-list span{
        float: left;
        margin: 0 10px;
    }
    .search{
        margin-right: 20px;
        margin-left: 40px;
        .icon {
       width: 20px;
       height: 20px;
      //  margin : auto auto;
      line-height: 24px;
    }
    }
}
</style>